<template>
  <div>
    <van-nav-bar title="编辑页面" left-arrow @click-left="$router.back()" />
    <div class="avatar-box">
      <van-image class="avatar" fit="cover" round :src="user.photo" />
      <van-uploader class="pic-uploader" :after-read="afterRead" />
    </div>
    <van-cell-group>
      <van-cell @click="chengeName" title="名称" :value="user.name" />
      <van-cell
        @click="genderShow = true"
        title="性别"
        :value="user.gender ? '男' : '女'"
      />
      <van-cell @click="chengeBirthday" title="生日" :value="user.birthday" />
    </van-cell-group>

    <van-dialog
      v-model="showName"
      @confirm="resName"
      title="修改名称"
      show-cancel-button
    >
      <van-field
        class="nameField"
        ref="userRef"
        v-model="username"
        placeholder="请输入用户名"
      />
    </van-dialog>
    <van-popup v-model="genderShow" position="bottom" class="popup">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="genderShow = false"
      />
      <van-cell-group>
        <van-cell @click="infoGender(1)" title="男" is-link />
        <van-cell @click="infoGender(0)" title="女" is-link />
      </van-cell-group>
    </van-popup>

    <van-popup v-model="timeshow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="changsdata"
        @cancel="timeshow = false"
      />
    </van-popup>
    <!-- 图片裁剪容器 -->
    <div class="fileimg" v-if="fileimgHide">
      <vueCropper
        ref="cropper"
        :img="cropImg"
        autoCrop
        autoCropWidth="150"
        autoCropHeight="150"
      ></vueCropper>
      <van-button @click="doCrop" class="buttom-a" type="primary"
        >裁剪</van-button
      >
      <van-button class="buttom-b" type="primary">返回</van-button>
    </div>
  </div>
</template>

<script>
import { chengeNameAPI, editImgAPI } from "@/api";
import moment from "moment";
import { VueCropper } from "vue-cropper";
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      showName: false,
      username: "",
      genderShow: false,
      timeshow: false,
      currentDate: new Date(),
      maxDate: new Date(),
      minDate: new Date("1990-1-1"),
      fileimgHide: false,
      cropImg: "",
    };
  },
  methods: {
    chengeName() {
      this.showName = true;
      this.username = this.user.name;
      this.$nextTick(() => {
        this.$refs.userRef.focus();
      });
    },
    async resName() {
      await chengeNameAPI({
        name: this.username,
      });
      this.$store.commit("setuserInfo", {
        ...this.user,
        name: this.username,
      });
    },
    async infoGender(gender) {
      this.genderShow = false;
      await chengeNameAPI({
        gender,
      });
      this.$store.commit("setuserInfo", {
        ...this.user,
        gender,
      });
    },
    chengeBirthday() {
      this.timeshow = true;
      this.currentDate = new Date(this.user.birthday);
    },
    async changsdata() {
      this.timeshow = false;
      const birthday = moment(this.currentDate).format("YYYY-MM-DD");
      await chengeNameAPI({
        birthday,
      });
      this.$store.commit("setuserInfo", {
        ...this.user,
        birthday,
      });
    },
    afterRead(file) {
      this.fileimgHide = true;
      this.cropImg = file.content;
    },
    doCrop() {
      this.$refs.cropper.getCropBlob(async (data) => {
        let fd = new FormData();
        fd.append("photo", data);
        let res = await editImgAPI(fd);
        this.$store.commit("setuserInfo", {
          ...this.user,
          photo: res.data.data.photo,
        });
        this.fileimgHide = false;
      });
    },
  },
  created() {
    this.$store.dispatch("reqUserInfo");
  },
  computed: {
    user() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style scoped lang='less'>
// 头像div
.avatar-box {
  height: 140px;
  display: flex;
  // 设置主轴居中和副轴居中就能水平垂直都居中了
  justify-content: center;
  align-items: center;
  position: relative;

  .avatar {
    width: 120px;
    height: 120px;
  }

  .pic-uploader {
    position: absolute;
    width: 100%;
    height: 100%;

    ::v-deep {
    .van-uploader__wrapper {
      height: 100%;
      .van-uploader__upload {
        width: 100%;
        height: 100%;
        // 因为还需要它点击右反应
        // 因此，要用opacity
        opacity: 0;
      }
    }
    }
  }
}

.nameField {
  border: 1px solid#e8e8e8;
}
.popup {
  height: 140px;
}
.fileimg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .buttom-a {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .buttom-b {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>